<template>
  <div>
    <a-modal
      :visible="visible"
      :title="`批量导入${exportConfig.title}`"
      cancelText="取消"
      okText="确定"
      width="60%"
      destroyOnClose
      @ok="submit"
      @cancel="cancel"
    >
      <a-spin :spinning="state.isLoading">
        <a-card>
          <a-form :model="state.param" v-if="state.holder">
            <a-form-item>
              <a-input
                style="width: 180px"
                readonly
                v-model:value="state.param.key"
                :placeholder="`请选择${state.holder}`"
                @focus="handleFocus"
              >
              </a-input>
            </a-form-item>
          </a-form>
          <div class="warapp">
            1.
            <a-button type="link" @click="downloadTemplate"
              >点击下载导入数据模板</a-button
            >
            将要导入的数据填写到数据导入模板文件中
          </div>
          <div>
            2. 选择要导入的数据文件
            <div style="padding: 10px 20px">
              <a-upload
                style="margin-left: 20px"
                name="files"
                :customRequest="handleUpload"
              >
                <a-button type="primary">
                  <a-icon type="upload" />{{ t("button.upload") }}</a-button
                >
              </a-upload>
            </div>
          </div>
        </a-card>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import { message } from "ant-design-vue";
import { exportExcel } from "@/api/export";
import { useI18n } from "vue-i18n";

export default {
  name: "charge",
  emits: ['close', 'handleModal'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    exportConfig: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, content) {
    const { t } = useI18n();
    const state = reactive({
      isLoading: false,
      param: {},
      holder: ''
    });
    const downloadTemplate = () => {
      const exportConfig = props.exportConfig;
      if (exportConfig.check) {
        return message.warning(`请先选择${state.holder}`)
      }
      state.isLoading = true;
      let params = { ...exportConfig.params };
      exportExcel(
        exportConfig.templateUrl, // 下载模板的url
        params, // 下载模板需要的参数
        exportConfig.downMethod, // 下载模板的方法
        exportConfig.fileName, // 文件名称
        exportConfig.suffix // 文件名后缀
      ).finally(() => {
        state.isLoading = false;
      });
    };

    const submit = () => {
      cancel();
    };
    const cancel = () => {
      if (state.isLoading) return;
      content.emit("close", "importVisible");
    };
    const handleUpload = (data, type) => {
      state.isLoading = true;
      const formData = new FormData();
      formData.append("file", data.file);
      props.exportConfig
        .exportExcel(formData)
        .then((res) => {
          if (res.code === 500) {
            message.error({ content: res.msg || "导入失败" }).then(() => {
              // cancel()
            });
            data.onError();
          } else if (res.code == 200) {
            data.onSuccess(res.data);
            message.success({ content: res.msg || "导入成功" }).then(() => {
              cancel();
            });
          }
        })
        .finally(() => {
          state.isLoading = false;
        });
    };
    const handleFocus = () => {
      content.emit('handleModal', (value) => {
        state.param.key = value.name
      })
    }

    onMounted(() => {
      state.holder = props.exportConfig.holder || ''
    })
    return {
      t,
      state,
      submit,
      cancel,
      handleUpload,
      downloadTemplate,
      handleFocus,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
  padding: 5px;
}

.warapp {
  /deep/ .ant-btn {
    padding: 0;
  }
}
</style>
